<template>
  <div class="app-container">
    <el-card>
      <!-- 头部 -->
      <qChoiceHead></qChoiceHead>
      <!-- 筛选表单 -->
      <el-form
        ref="queryForm"
        :model="queryData"
        label-width="80px"
        size="small"
      >
        <el-row>
          <!-- 学科 -->
          <el-col :span="6">
            <el-form-item label="学科" prop="subjectID">
              <el-select
                @change="choiceLesson"
                v-model="queryData.subjectID"
                placeholder="请选择学科"
              >
                <el-option
                  v-for="item in lessonList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 二级目录 -->
          <el-col :span="6">
            <el-form-item label="二级目录" prop="catalogID">
              <el-select
                v-model="queryData.catalogID"
                placeholder="请选择二级目录"
              >
                <el-option
                  v-for="item in directList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 标签 -->
          <el-col :span="6">
            <el-form-item label="标签" prop="tags">
              <el-select v-model="queryData.tags" placeholder="请选择标签">
                <el-option
                  v-for="item in tagList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 关键字 -->
          <el-col :span="6">
            <el-form-item label="关键字" prop="keyword">
              <el-input
                v-model="queryData.keyword"
                placeholder="根据题干搜索"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- 试题类型 -->
          <el-col :span="6">
            <el-form-item label="试题类型" prop="questionType">
              <el-select
                v-model="queryData.questionType"
                placeholder="请选择试题类型"
              >
                <el-option
                  v-for="item in testList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 难度 -->
          <el-col :span="6">
            <el-form-item label="难度" prop="difficulty">
              <el-select
                v-model="queryData.difficulty"
                placeholder="请选择难度"
              >
                <el-option
                  v-for="item in difficultList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 方向 -->
          <el-col :span="6">
            <el-form-item label="方向" prop="direction">
              <el-select v-model="queryData.direction" placeholder="请选择方向">
                <el-option
                  v-for="item in directionList"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 录入人 -->
          <el-col :span="6">
            <el-form-item label="录入人" prop="creatorID">
              <el-select
                v-model="queryData.creatorID"
                placeholder="请选择录入人"
              >
                <el-option
                  v-for="item in simPersonList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 题目备注 -->
          <el-col :span="6">
            <el-form-item label="题目备注" prop="remarks">
              <el-input
                v-model="queryData.remarks"
                placeholder="请输入题目备注"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- 企业简称 -->
          <el-col :span="6">
            <el-form-item label="企业简称" prop="shortName">
              <el-input
                v-model="queryData.shortName"
                placeholder="请输入企业简称"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- 城市 -->
          <el-col :span="6" style="display: flex">
            <el-form-item
              label="城市"
              prop="province"
              style="width: 110%; margin-right: 2%"
            >
              <!-- 省份 -->
              <el-select
                @change="choiceProvince"
                v-model="queryData.province"
                placeholder="请选择省份"
              >
                <el-option
                  v-for="item in provinceList"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 城市 -->
            <el-form-item prop="city" label-width="0px">
              <el-select v-model="queryData.city" placeholder="请选择城市">
                <el-option
                  v-for="item in cityList"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 按钮区域 -->
          <el-col :span="6">
            <el-form-item style="text-align: right">
              <el-button size="small" @click="clearForm">清除</el-button>
              <el-button size="small" type="primary" @click="search"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- tab栏 -->
      <el-tabs v-model="activeName" @tab-click="handleTab" type="card">
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="待审核" name="0"></el-tab-pane>
        <el-tab-pane label="已审核" name="1"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
      </el-tabs>
      <!-- 消息提示 -->
      <el-alert
        style="margin-bottom: 15px"
        title=""
        type="info"
        show-icon
        :closable="false"
      >
        数据一共{{ total }}条
      </el-alert>
      <!-- 表单区域 -->
      <div class="table" style="width: 100%">
        <el-table
          ref="filterTable"
          :data="tableData"
          fit
          style="width: auto"
          :header-cell-style="{
            background: '#fafafa',
            color: '#909399',
            borderBottom: '2px solid #e8e8e8'
          }"
        >
          <el-table-column prop="number" label="试题编号" width="150px">
          </el-table-column>
          <el-table-column prop="subject" label="学科"> </el-table-column>
          <el-table-column prop="catalog" label="目录"> </el-table-column>
          <el-table-column label="题型">
            <template v-slot="{ row }">
              {{ filterQuestions(row.questionType) }}
            </template>
          </el-table-column>
          <el-table-column label="题干" width="195px">
            <template v-slot="{ row }">
              {{ toText(row.question) }}
            </template>
          </el-table-column>
          <el-table-column label="录入时间" width="195px">
            <template v-slot="{ row }">
              {{ formatTime(row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column label="难度">
            <template v-slot="{ row }">
              {{ filterDefficult(row.difficulty) }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="150px">
          </el-table-column>
          <el-table-column label="审核状态">
            <template v-slot="{ row }">
              {{ filterchkState(row.chkState) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="chkRemarks"
            label="审核意见"
            width="150px"
          ></el-table-column>
          <el-table-column
            prop="chkUser"
            label="审核人"
            width="150px"
          ></el-table-column>
          <el-table-column prop="publishState" label="发布状态">
            <template v-slot="{ row }">
              {{ filterpublishState(row.publishState) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            width="195px"
            label="操作"
            fixed="right"
          >
            <template v-slot="{ row }">
              <el-button type="text" size="small" @click="showDetail(row.id)"
                >预览</el-button
              >
              <el-button
                :disabled="row.chkState != 0"
                type="text"
                size="small"
                @click="questionsCheck(row.id)"
                >审核</el-button
              >
              <!-- 已发布不可以修改 -->
              <el-button
                :disabled="row.publishState == 1"
                type="text"
                size="small"
                @click="
                  $router.push({ name: 'questions-new', query: { id: row.id } })
                "
                >修改</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="upOrDownQue(row.id, row.publishState)"
              >
                <!-- 状态为1是上架，显示下架 -->
                {{ row.publishState == 1 ? '下架' : '上架' }}
              </el-button>
              <!-- 已发布不可以删除 -->
              <el-button
                type="text"
                :disabled="row.publishState == 1"
                size="small"
                @click="delQue(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页组件 -->
      <qChoicePage
        :total="total"
        :page.sync="queryData.page"
        :pagesize.sync="queryData.pagesize"
        :getChoiceList="getChoiceList"
      ></qChoicePage>
    </el-card>
    <!-- 试题审核dialog -->
    <el-dialog
      v-if="questionsCheckVisible"
      title="题目审核"
      :visible.sync="questionsCheckVisible"
      width="30%"
    >
      <questionsCheck
        @success="getChoiceList()"
        ref="questionsCheck"
        :questionsCheckVisible.sync="questionsCheckVisible"
      ></questionsCheck>
    </el-dialog>
    <!-- 预览详情dialog -->
    <el-dialog
      v-if="detailVisible"
      title="题目预览"
      :visible.sync="detailVisible"
      width="65%"
    >
      <qChoiceShow
        ref="qChoiceShow"
        :detailVisible="detailVisible"
      ></qChoiceShow>
    </el-dialog>
  </div>
</template>

<script>
import { choice, choicePublish, remove } from '@/api/hmmm/questions'
import { html2Text } from '@/utils'
import moment from 'moment'
import questionsCheck from '../components/questions-check'
import qChoiceHead from '../components/qChoiceHead.vue'
import qChoicePage from '../components/qChoicePage.vue'
import { provinces, citys } from '@/api/hmmm/citys'
import { simple } from '@/api/base/users'
import { simple as simpleSub } from '@/api/hmmm/subjects' // 获取学科
import { simple as simpleDirect } from '@/api/hmmm/directorys' // 获取二级目录
import { simple as simpleTag } from '@/api/hmmm/tags' // 获取标签
import qChoiceShow from '../components/qChoiceShow.vue'

export default {
  name: 'questionsChoice',
  components: {
    questionsCheck,
    qChoiceHead,
    qChoicePage,
    qChoiceShow
  },
  data () {
    return {
      queryData: {
        page: 1, // 当前页数
        pagesize: 10, // 每页条数
        subjectID: null, // 学科
        catalogID: null, // 目录
        tags: null, // 标签名称
        keyword: null, // 关键字
        questionType: null, // 试题类型
        difficulty: null, // 难度
        direction: null, // 方向
        creatorID: null, // 录入人
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        province: null, // 省份
        city: null, // 城市
        chkState: null // 审核状态
      },
      total: 0,
      tableData: [],
      activeName: 'all',
      questionsCheckVisible: false,
      provinceList: provinces(),
      cityList: [], // 城市列表
      simPersonList: [], // 录入人列表
      lessonList: [], // 学科列表
      directList: [], // 二级目录列表
      tagList: [], // 标签数组
      testList: [
        { value: '1', label: '单选' },
        { value: '2', label: '多选' },
        { value: '3', label: '简答' }
      ], // 试题类型列表
      difficultList: [
        { value: '1', label: '简单' },
        { value: '2', label: '一般' },
        { value: '3', label: '困难' }
      ], // 难度列表
      directionList: [
        'o2o',
        '外包服务',
        '企业服务',
        '互联网金融',
        '企业咨询',
        '互联网',
        '电子商务',
        '其他'
      ], // 方向列表
      detailVisible: false
    }
  },
  created () {
    this.getChoiceList()
    this.loadSimPerson()
    this.loadLessonList()
  },
  methods: {
    // 获取精选题列表
    async getChoiceList () {
      const res = await choice(this.queryData)
      console.log(res)
      if (res.status === 200) {
        this.total = res.data.counts
        this.tableData = res.data.items
      }
    },
    // 筛选题目类型
    filterQuestions (id) {
      const whiteList = ['1', '2', '3', 1, 2, 3]
      if (whiteList.includes(id)) {
        var filterList = [
          { id: '1', type: '单选' },
          { id: '2', type: '多选' },
          { id: '3', type: '简答' }
        ]
        // eslint-disable-next-line eqeqeq
        return filterList.find((item) => item.id == id).type
      } else {
        return '废数据'
      }
    },
    // html转text
    toText (val) {
      return html2Text(val)
    },
    // 格式化日期
    formatTime (time) {
      return moment(time).format('YYYY-MM-DD HH:mm:ss')
    },
    // 筛选难度
    filterDefficult (id) {
      const whiteList = ['1', '2', '3', 1, 2, 3]
      if (whiteList.includes(id)) {
        var filterList = [
          { id: '1', type: '简单' },
          { id: '2', type: '一般' },
          { id: '3', type: '困难' }
        ]
        // eslint-disable-next-line eqeqeq
        return filterList.find((item) => item.id == id).type
      } else {
        return '废数据'
      }
    },
    // 筛选审核状态
    filterchkState (id) {
      const whiteList = ['0', '1', '2', 0, 1, 2]
      if (whiteList.includes(id)) {
        var filterList = [
          { id: '0', type: '待审核' },
          { id: '1', type: '已通过' },
          { id: '2', type: '已拒绝' }
        ]
        // eslint-disable-next-line eqeqeq
        return filterList.find((item) => item.id == id).type
      } else {
        return '废数据'
      }
    },
    // 筛选发布状态
    filterpublishState (id) {
      const whiteList = ['0', '1', 0, 1]
      if (whiteList.includes(id)) {
        var filterList = [
          { id: '0', type: '已下架' },
          { id: '1', type: '已上架' }
        ]
        // eslint-disable-next-line eqeqeq
        return filterList.find((item) => item.id == id).type
      } else {
        return '废数据'
      }
    },
    // tab栏切换
    handleTab () {
      if (this.activeName === 'all') {
        this.queryData.chkState = null
      } else {
        this.queryData.chkState = Number(this.activeName)
      }
      console.log(this.queryData.chkState)
      this.getChoiceList()
    },
    // 精选题上下架
    async upOrDownQue (id, publishState) {
      const message =
        // eslint-disable-next-line eqeqeq
        publishState == 1 ? '您确认下架这道题目吗?' : '您确认上架这道题目吗?'
      const result = await this.$confirm(`${message}`, '提示').catch((e) => e)
      if (result === 'confirm') {
        // 上下架状态取反
        // eslint-disable-next-line eqeqeq
        const pub = publishState == 1 ? 0 : 1
        const res = await choicePublish({ id, publishState: pub })
        console.log(res, 11111)
        if (res.status === 200) {
          this.$message.success('改变上架状态成功')
          // 重新获取数据
          this.getChoiceList()
        }
      }
    },
    // 审核状态修改
    questionsCheck (id) {
      this.questionsCheckVisible = true
      console.log(id)
      this.$nextTick(() => {
        this.$refs.questionsCheck.checkForm.id = id
      })
    },
    // 数据删除
    async delQue (row) {
      const result = await this.$confirm(
        '此操作将永久删除该题目, 是否继续?',
        '提示'
      ).catch((e) => e)
      if (result === 'confirm') {
        const res = await remove(row)
        if (res.status === 200) {
          this.$message.success('删除题目成功')
          // 判断是否为最后一条并且是否不为最后一页，若满足当前页--
          if (this.queryData.page > 1 && this.tableData.length === 1) {
            this.queryData.page--
          }
          this.getChoiceList()
        }
      }
    },
    // 选择省份
    choiceProvince () {
      this.cityList = []
      this.queryData.city = null
      // 筛选出城市数组赋值
      this.cityList = citys(this.queryData.province)
    },
    // 获取录入人
    async loadSimPerson () {
      const res = await simple()
      if (res.status === 200) {
        this.simPersonList = res.data
      }
    },
    // 获取学科列表
    async loadLessonList () {
      const res = await simpleSub()
      if (res.status === 200) {
        this.lessonList = res.data
      }
    },
    // 选择学科
    async choiceLesson () {
      const res = await simpleDirect({ subjectID: this.queryData.subjectID })
      if (res.status === 200) {
        this.queryData.catalogID = null
        // 二级目录赋值
        this.directList = res.data
      }
      const result = await simpleTag({ subjectID: this.queryData.subjectID })
      if (result.status === 200) {
        this.queryData.tags = null
        // 标签下拉菜单赋值
        this.tagList = res.data
      }
    },
    clearForm () {
      this.$refs.queryForm.resetFields()
      this.getChoiceList()
    },
    search () {
      // 跳到第一页
      this.queryData.page = 1
      this.getChoiceList()
    },
    showDetail (id) {
      this.detailVisible = true
      this.$nextTick(() => {
        this.$refs.qChoiceShow.data.id = id
      })
    }
  }
}
</script>

<style scoped lang="scss">
.el-select {
  width: 100%;
}
.table {
  padding-bottom: 20px;
}
::v-deep .el-alert__icon {
  font-size: 16px;
}
::v-deep .el-alert {
  margin: 0;
}
</style>
